<template>
  <div>
    <div class="login">
      <!-- 搭建结构 -->
      <div class="container switch">
        <!-- 登录页面 -->
        <div class="container-form container-signup">
          <form action="" class="form">
            <h1 class="form-title" style="font-weight: bold">登 录</h1>
            <div class="input-container">
              <!-- <i class="fa-solid fa-user"></i> -->
              <embed src="icon/user-solid.svg" type="image/svg+xml" />
              <input
                type="text"
                placeholder=" 账户"
                class="input"
                ref="account"
                v-model="form.account"
              />
            </div>
            <div class="input-container">
              <embed src="icon/lock-solid.svg" type="image/svg+xml" />
              <!-- <i class="fa-solid fa-lock"></i> -->
              <input
                type="password"
                placeholder=" 密码"
                class="input"
                v-model="form.passWord"
              />
            </div>
            <div class="item-container">
              <a href="javascript:void(0);">Forgot your password?</a>
            </div>
            <button class="submit" @click="login">登 录</button>

            <div class="registArrow">
              <embed
                src="icon/arrow-left-long-solid.svg"
                type="image/svg+xml"
              />
              <p @click="goSignUp">注册账户</p>
            </div>
          </form>
        </div>

        <!-- 注册页面 -->

        <div class="container-form container-signin">
          <form action="javascript:void(0);" class="form">
            <h1 class="form-title" style="font-weight: bold">注 册</h1>
            <div class="input-container">
              <embed src="icon/user-solid.svg" type="image/svg+xml" />

              <input
                type="text"
                placeholder="User Name"
                ref="user"
                class="input"
                v-popover:popover
                v-model="regist_form.name"
              />
            </div>

            <div class="input-container">
              <embed src="icon/envelope-solid.svg" type="image/svg+xml" />

              <input
                type="email"
                placeholder="Email"
                class="input"
                v-model="regist_form.email"
              />
            </div>
            <div class="input-container">
              <embed src="icon/lock-solid.svg" type="image/svg+xml" />

              <input
                type="password"
                placeholder="Password"
                class="input"
                v-model="regist_form.passWord"
              />
            </div>
            <div class="input-container">
              <embed src="icon/lock-solid.svg" type="image/svg+xml" />

              <input
                type="password"
                placeholder="Confirm password"
                class="input"
                v-model="regist_form.con_passWord"
              />
            </div>
            <button class="submit" @click="signUp">注册</button>
            <div class="loginArrow">
              <embed
                src="icon/arrow-right-long-solid.svg"
                type="image/svg+xml"
              />
              <p @click="goSignIn">登录账户</p>
            </div>
          </form>
        </div>

        <!-- 覆盖层 -->
        <div class="container-overlay">
          <div class="overlay">
            <div class="overlay-slide overlay-left">
              <div class="logPageLog">
                <img
                  src="../assets/icon/new/globlelogin.svg"
                  alt=""
                  class="main-icon"
                />
                <img
                  src="simulationIcon/ghfs_small2.PNG"
                  alt=""
                  class="main-iconname"
                />
              </div>

              <h1>水文气象集合预报平台</h1>

              <!-- <button class="submit" @click="goSignUp">注 册</button> -->
            </div>
            <div class="overlay-slide overlay-right">
              <div class="logPageLog">
                <img
                  src="../assets/icon/new/globlelogin.svg"
                  alt=""
                  class="main-icon"
                />
                <img
                  src="simulationIcon/ghfs_small2.PNG"
                  alt=""
                  class="main-iconname"
                />
              </div>

              <h1>水文气象集合预报平台</h1>
              <!-- <button class="submit" @click="goSignIn">登 录</button> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="show_reg">
      <div class="shade"></div>
      <register class="register"></register>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// import { defineComponent, reactive, ref } from "vue";
// import { ElMessage } from "element-plus";
// import { useRouter } from "vue-router";
import register from "./Register.vue"; //组件不能括号，变量/函数要括号
import { config } from "../plugins/config.js";
export default {
  components: {
    register,
  },
  data() {
    return {
      ip: config.ip,
      input: "",
      userInfo: {},
      form: {
        account: "",
        passWord: "",
      },

      regist_form: {
        name: "",
        account: "",
        email: "",
        passWord: "",
        con_passWord: "",
      },
      show_reg: false,
    };
  },
  created() {
    let that = this;
    this.$nextTick(() => {
      that.$refs.account.focus();
    });
  },
  methods: {
    goSignIn() {
      let that = this;
      const container = document.querySelector(".container");
      container.classList.add("switch");
      this.$nextTick(() => {
        that.$refs.account.focus();
      });
    },
    goSignUp() {
      let that = this;
      const container = document.querySelector(".container");
      container.classList.remove("switch");
      this.$nextTick(() => {
        that.$refs.user.focus();
      });
    },
    cancel() {
      // 取消鼠标监听事件 菜单栏
      this.show_reg = false; //与VUE2不同之处，非常重要！！！！
      // console.log(this.show_reg);
      document.removeEventListener("dblclick", this.cancel); // 关掉监听，
    },
    register() {
      this.show_reg = true;
      // console.log(this.show_reg);
      setTimeout(() => {
        document.addEventListener("dblclick", this.cancel);
      }, 200);
    },
    signUp() {
      if (this.regist_form.name == "") {
        this.$notify.error({
          title: "请输入用户名！",
        });
        return;
      }
      if (this.countLetters(this.regist_form.email, "@") != 1) {
        this.$notify.error({
          title: "请输入正确的邮箱地址！",
        });
        return;
      }

      if (this.regist_form.passWord != this.regist_form.con_passWord) {
        this.$notify.error({
          title: "两次输入密码不一致！！！",
        });
        return;
      }

      this.regist_form.account = this.regist_form.email.split("@")[0];
      const _this = this;
      axios.post(config.ip + "registration", this.regist_form).then((resp) => {
        if (resp.data == "ok") {
          _this.goSignIn();
        } else {
          _this.$notify.error({
            title: "注册失败！",
          });
        }
      });
    },
    login() {
      let _this = this;

      axios.post(this.ip + "load", _this.form).then((resp) => {
        console.log(resp.data);
        _this.userInfo = resp.data.userInfo;
        let status = resp.data.status;
        switch (status) {
          case 1:
            this.$notify.error({
              title: "登录失败",
              message: "用户名未注册！",
            });
            break;
          case 2:
            this.$notify.error({
              title: "登录失败",
              message: "密码错误！",
            });
            break;
          case 3:
            this.$notify.success({
              title: "登录成功",
              message: "",
            });
            localStorage.setItem("user", JSON.stringify(_this.userInfo));
            _this.$router.push("/models");
            break;
        }
      });
    },
    countLetters(str, letter) {
      const regex = new RegExp(letter, "g");
      const matches = str.match(regex);
      return matches ? matches.length : 0;
    },
  },
};
</script>

<style scoped>
.login {
  /* width: 100vw;
  height: 100vh; */
  /* background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Falbum%2F5a6b548bfa01131459bdd30e365139650978d3e4.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648813012&t=d3a45b78e8376537ac0da460a654a0fe"); */
  /* background-image: url("../assets/log2.png");
  background-size: cover;
  filter: blur(0px);
  z-index: -1; */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* background: url("https://i.loli.net/2021/10/24/gkIC45ZqmLBRSAD.jpg") no-repeat
    fixed center; */
  background: url("../assets/log2.png") no-repeat fixed center;
  background-size: cover;
}
/*登录页面测试 */
/* 盒子样式 */
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw;
  height: 70vh;
  background-color: #e9e9e9;
  box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.3),
    0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
  border-radius: 0.36rem;
  overflow: hidden;
}
.logPageLog {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12vh;
  margin-bottom: 0.5vh;
  width: 100%;
  /* padding-left: 36px; */
}
.logPageLog .main-icon {
  width: 38px;
  height: 38px;
  margin-right: 5px;
  color: #01395e;
}
.logPageLog .main-iconname {
  width: 111.84px;
  height: 38px;
}

input,
button {
  outline: none;
  border: none;
}
/* 清除a标签默认下划线 颜色设置为#333 */
a {
  text-decoration: none;
  color: #333;
  /* margin: 1.25rem 0; */
}
/* 将两个form表单设置绝对定位 */
.container-form {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.5s ease-in-out;
}
/* 设置注册页样式 */
.container-signup {
  left: 0;
  width: 50%;
  z-index: 1;
  opacity: 0;
  background-color: #f0f0f0;
}
/* 设置登录页样式 */
.container-signin {
  left: 0;
  width: 50%;
  z-index: 2;
  opacity: 1;
  background-color: white;
}
/* 默认显示signup注册页，通过操作switch类名 显示登录页 */
.container.switch .container-signup {
  transform: translateX(100%);
  z-index: 5;
  opacity: 1;
}
.container.switch .container-signin {
  transform: translateX(100%);
  opacity: 0;
}
/* 设置覆盖层 */
.container-overlay {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
  z-index: 999;
}
/* 设置显示背景图 */
.overlay {
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: url("../assets/log2.png") no-repeat fixed center;
  background-size: cover;
  transition: transform 0.5s ease-in-out;
  /* 完工！ */
}
/* 默认左边显示 通过操作switch类名显示登录页 */
.container.switch .container-overlay {
  transform: translateX(-100%);
}
.container.switch .overlay {
  transform: translateX(50%);
}
/* 设置切换按钮页样式 */
.overlay-slide {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 50%;
  transition: transform 0.5s ease-in-out;
}

/* 这里的意思就是让按钮跟随页面一起进行移动 如果不加会有点难看 */
/* 是不是很难看！ */
.overlay-left {
  transform: translateX(-20%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.overlay-left h1 {
  /* margin-top: 100px; */
  /* color: white; */
  color: #01395e;
  margin: 0px;
}
.overlay-right {
  transform: translateX(0);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  right: 0;
}
.overlay-right h1 {
  /* margin-top: 100px; */
  /* color: white; */
  margin: 0px;
  color: #01395e;
}
.container.switch .overlay-left {
  transform: translateX(0);
}
.container.switch .overlay-right {
  transform: translateX(20%);
}
/* 设置表单内元素样式 */
.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 1rem;
}
.form i {
  font-size: 22px;
}
.form .input-container {
  display: flex;
  align-items: center;
  width: 400px;
  margin: 1rem 0;
  padding-left: 0.36rem;
  border-bottom: 2px solid gray;
}
.form .item-container {
  display: flex;
  /* align-items: center; */
  justify-content: flex-start;
  height: fit-content;
  width: 400px;
  padding-left: 0.36rem;
}
.form .input-container embed {
  width: 23px;
  height: 23px;
}

/* 设置input标签样式 */
.input {
  margin: 0.5rem 0;
  padding: 0rem 0rem 0rem 1rem;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0);
}
/* 设置表单标题样式 */
.form-title {
  font-weight: 300;
  margin-bottom: 1rem;
}
/* 设置按钮样式 */
.submit {
  padding: 0.6rem 3rem;
  background-image: -webkit-linear-gradient(40deg, #0367a6 0%, #008997 70%);
  border-radius: 1rem;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  transition: transform 0.1s ease-in-out;
}
.registArrow {
  height: fit-content;
  width: 400px;
  display: flex;
  margin-top: 20px;
  justify-content: flex-start;
}
.registArrow embed {
  height: 20px;
  margin-right: 10px;
}
.registArrow p {
  cursor: pointer;
}
.loginArrow {
  height: fit-content;
  width: 400px;
  display: flex;
  margin-top: 20px;
  justify-content: flex-end;
}
.loginArrow embed {
  height: 20px;
  margin-right: 10px;
}
.loginArrow p {
  cursor: pointer;
}
/* 偷偷添加个小手  对了！ */
/* 只设置表单按钮的外边距 */
.form > .submit {
  margin-top: 1.5rem;
}
/* 设置按钮按下样式 */
.submit:active {
  transform: scale(0.95);
}
</style>
